<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button v-if="buttonsPermissions.XiuGai" @click="onShowDialog" type="primary"
          style="width: 1.2rem">批量设置</el-button>
        <el-button v-else class="disabled_button" disabled>批量设置</el-button>
        <el-button v-if="buttonsPermissions.XiuGai" @click="onSubmit">保存(S)</el-button>
        <el-button v-else class="disabled_button" disabled>保存(S)</el-button>
        <!-- <el-button v-if="buttonsPermissions.DaoChu" @click="exportExcel">导出</el-button>
        <el-button v-else class="disabled_button" disabled>导出</el-button> -->
        <el-button v-if="buttonsPermissions.DaYin" @click="handleShortcutKeyPrint">打印(P)</el-button>
        <el-button v-else class="disabled_button" disabled>打印(P)</el-button>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.queryParam" placeholder="请输入商品名称\条码\编码\规格\拼音码"></el-input>
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_screen">
        <div class="screen_left">
          <div>
            <p>仓库</p>
            <span>*</span>
            <el-select placeholder v-model="queryData.storehouseId" @change="onChangeStorehouse" filterable
              @visible-change="(value) => handleFilterMethod('', 'storehouseName')"
              :filter-method="(value) => handleFilterMethod(value, 'storehouseName')" ref="cangku">
              <el-option v-for="item in ckOptions" :key="item.id" :label="item.storehouseName"
                :value="item.id"></el-option>
            </el-select>
          </div>
          <p class="tips_p">如选择“全部”，则对所有库存量设置预警</p>
        </div>
      </div>
      <div class="div_table">
        <div class="div_tree">
          <div class="tree_div1">
            <p>商品类别</p>
          </div>
          <div class="tree_input">
            <p>
              <input type="text" placeholder="查找" v-model="lookupValue" />
              <span>
                <i class="el-icon-search"></i>
              </span>
            </p>
          </div>
          <div class="tree_structure">
            <el-tree :data="treeData" node-key="label" highlight-current default-expand-all
              :expand-on-click-node="false" ref="tree" :filter-node-method="filterNode"
              @node-click="handleNodeClick"></el-tree>
          </div>
        </div>
        <div class="table_content">
          <el-table ref="tableRef" show-summary :summary-method="getSummaries" highlight-current-row :header-cell-style="{
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            borderColor: '#dddddd',
          }" :cell-style="{ textAlign: 'center' }" border :data="tableData" height="100%" style="width: 100%"
            @selection-change="handleSelectionChange" @sort-change="changeSort" @row-click="onClickTable">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column border :resizable="item.props=='goodsName'?true:false"  :show-overflow-tooltip="true" v-for="(item, index) in columnData.data" :key="index"
              :label="item.zidingyiName ? item.zidingyiName : item.morenName" :prop="item.props" min-width="130px"
              :sortable="item.sortable" v-if="item.zidingyiState"
              :width="item.props == 'spmc' ? '170px' : ''">
              <template slot-scope="scope">
                <div class="index_input">
                  <input v-if="item.props == 'highStockShow' && buttonsPermissions.XiuGai" @focusin="focusinSelect"
                    @blur="updateGoodsWarnings(scope.row, 'highStockShow')"
                    @input="inputNumber('highStockShow', scope.row)" v-model="scope.row[item.props]" />
                  <input v-else-if="item.props == 'miniStockShow' && buttonsPermissions.XiuGai" @focusin="focusinSelect"
                    @blur="updateGoodsWarnings(scope.row, 'miniStockShow')"
                    @input="inputNumber('miniStockShow', scope.row)" v-model="scope.row[item.props]" />
                    <div v-else-if="item.props == 'goodsName'" style="width: 100%; white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;">{{ scope.row[item.props] }}</div>
                  <div v-else >{{ scope.row[item.props] }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="length">共{{ total }}条记录</div>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryData.pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="queryData.pageSize"
            layout="jumper, prev, pager,next, sizes" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration ref="setColumnRef" :columnDataArr="columnData.data" :defaultColumnDataArr="defaultColumnData"
      orderType="库存上下限设置" @onSaveColumn="onSaveColumn"></CConfiguration>
    <!-- 新增树形结构数据弹框 -->
    <NewCategory v-if="showNewTree" :newTreeData="newTreeData" @onSaveTreeChanges="onSaveTreeChanges"
      @onCancelTree="onCancelTree"></NewCategory>
    <!-- 提醒弹框 -->
    <DialogSimplePrompt ref="simplePrompt" @onSure="onSureSimple"></DialogSimplePrompt>
    <DialogStockSettings ref="stockSettings" @onSubmitYjsl="onSubmitYjsl"></DialogStockSettings>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import NewCategory from '@/components/c_category/NewCategory'
import PopupReminder from '../../components/popupReminder'
import PopupSuccess from '../../components/popupSuccess'
import DialogStockSettings from '../../components/dialogStockSettings'
import DialogSimplePrompt from '../../components/dialogSimplePrompt'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintRecord'
import { getAction, postAction, downPostFile } from '@/api/manage'
// 导入调用处理权限数据方法
import {
  handlePermissions,
  handleOtherPerms,
  getSystemParamsByName,
  formatFour,
  formatNumber,
  delcommafy,
} from '@/utils/index'
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID, ACCOUNT_BOOK } from '@/store/mutation-types'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'billStockSettings',
  components: {
    CConfiguration,
    NewCategory,
    PopupReminder,
    PopupSuccess,
    DialogSimplePrompt,
    DialogStockSettings,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('库存上下限设置')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  data() {
    return {
      // 传递给弹框的数据
      tipsData: {
        tipsWords: '',
        tipsMark: '',
      },
      dialogVisible: false, //控制设置库存上下限预警数量弹框
      // 仓库
      ckOptions: [],
      // 查询条件数据
      queryData: {
        queryParam: '', // 输入的商品名称
        xghGoodsTypeId: '',
        storehouseId: '', //仓库id
        xghStorehouseName: '总库存', //仓库名称
        xghStorehouseNamePre: '总库存', // 仓库名称
        storehouseIdPre: '', // 仓库id
        pageNo: 1, //默认开始页面
        pageSize: 20, //每页的数据条数
      },
      // 预警数量弹框数据
      dialogData: {},
      // 表格数据
      tableData: [],
      accountBookId: '', //账套id
      // 列配置数据
      columnData: {
        title: '列配置',
        data: [
          {
            id: '2',
            morenName: '商品名称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 1,
            zidingyiSort: 1,
            noModify: false,
            props: 'goodsName',
          },
          {
            id: '3',
            morenName: '商品编码',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 2,
            zidingyiSort: 2,
            noModify: false,
            props: 'goodsNumber',
          },
          {
            id: '4',
            morenName: '规格',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 3,
            zidingyiSort: 3,
            noModify: false,
            props: 'specs',
          },
          {
            id: '5',
            morenName: '条形码',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 4,
            zidingyiSort: 4,
            noModify: false,
            props: 'barCode',
          },
          {
            id: '6',
            morenName: '基本单位',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 5,
            zidingyiSort: 5,
            noModify: false,
            props: 'baseUnit_dictText',
          },
          {
            id: '7',
            morenName: '库存上限',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 6,
            zidingyiSort: 6,
            noModify: false,
            props: 'highStockShow',
          },
          {
            id: '8',
            morenName: '库存下限',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 7,
            zidingyiSort: 7,
            noModify: false,
            props: 'miniStockShow',
          },
        ],
      },
      defaultColumnData: [], // 默认列配置
      updateId: '',
      columnKey: '库存上下限设置', // 列配置的标识key
      lookupValue: '', //类别查找值
      // 类别数据
      treeData: [],
      multipleSelection: [], // 存储多选的数据
      total: 0, // 数据总条数
      showNewTree: false, //显示树形结构数据新增弹框
      // 传递数据给新增树形结构组件
      newTreeData: {
        parentNode: '',
        nowNode: '',
      },
      url: {
        exportXlsUrl: '/xghGoods/xghGoods/exportXlsLimit',
      }, // 导出地址
      dataLoading: false, // 数据请求状态
      billName: '库存上下限设置',
      nowLabel: '全部',
      numLength: 2,
      saveData: {},
    }
  },
  watch: {
    lookupValue(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    // 获取小数位数
    let unititem = this.$lcStorage.get('toFixedList')
    if (unititem) {
      this.numLength = unititem.number
    }
    let accountBook = Vue.ls.get(ACCOUNT_BOOK)
    this.accountBookId = accountBook && accountBook.id
    // 初始化列配置数据
    this.defaultColumnData = this.columnData.data
    this.selectTitle()
    this.getData()
  },
  methods: {
    // 保存
    handleShortcutKeySave() {
      if (!this.buttonsPermissions.LuRu) {
        this.showTips('未拥有保存权限！')
      } else {
        this.onSubmit()
      }
    },
    // 打印
    handleShortcutKeyPrint() {
      if (!this.buttonsPermissions.DaYin) {
        this.showTips('未拥有打印权限！')
      } else if (!this.tableData || this.tableData.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          leibie: this.nowLabel,
          cangku: this.$refs.cangku.selected.label,
          printExclusive: this.tableData,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, () => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            })
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    // 获取数据
    async getData() {
      // 获取商品分类和商品信息
      this.getTreeData()
      // 仓库信息-下拉框初始化
      this.getStorehouseOptions()

      this.queryWarningStock()
    },
    // 获取商品类别数据
    getTreeData() {
      let data = {
        GoodsTypeName: this.GoodsTypeName,
      }
      getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
        if (res.code === 200) {
          let list = res.result
          let result = this.getTreeDataByList(list, '0', '')
          this.treeData = [
            {
              id: '',
              label: '全部',
              children: result,
            },
          ]
        }
      })
    },
    getTreeDataByList(list, parentId, parentName) {
      let data = []
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.pid == parentId) {
          data.push({
            ...element,
            id: element.id,
            label: element.goodsTypeName,
            parentId,
            parentName,
            children: this.getTreeDataByList(list, element.id, element.companyTypeName),
          })
        }
      }
      return data
    },
    // 库存上下限设置-查询
    queryWarningStock() {
      let data = {
        ...this.queryData,
        fuzzyQueryParam: this.queryData.queryParam,
        xghStorehouseId: this.queryData.storehouseId,
        xghAccountBookId: this.accountBookId,
      }
      getAction('/xghGoodsWarning/xghGoodsWarning/queryWarningStock', data).then((res) => {
        if (res.code === 200) {
          const data = res.result.records || []
          this.total = res.result.total
          data.forEach((item) => {
            // item.highStock = formatFour(item.highStock)
            // item.highStockShow = formatNumber(item.highStock)
            // item.miniStock = formatFour(item.miniStock)
            // item.miniStockShow = formatNumber(item.miniStock)
            item.highStockShow = item.highStock
            item.miniStockShow = item.miniStock
          })
          this.tableData = data
          this.saveData = JSON.parse(JSON.stringify(this.tableData))
        }
      })
    },
    // 仓库信息-下拉框初始化
    getStorehouseOptions() {
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
        if (res.code === 200) {
          this.ckOptions = res.result
          this.ckOptions.unshift({ storehouseName: '全部', id: '', storehousePinyinCode: 'QB' })
          this.totalStores = this.ckOptions
        } else {
          this.showTips(res.message, 2)
        }
      })
    },
    // 提醒弹框确认后操作
    onYes(mark) {
      if (mark == 'onShowDialog') {
        console.log('显示批量设置弹框')
      }
    },
    // 显示批量设置弹框
    onShowDialog() {
      if (this.multipleSelection.length) {
        this.$refs.stockSettings.dialogVisible = true
      } else {
        this.onShowTipsDialog('请先选择需要设置的商品！', 'onShowDialog')
      }
    },
    // 保存预警数量
    onSubmitYjsl(val) {
      this.dialogData = val
      // 判断库存上下限设置输入数据是否合理
      if (delcommafy(this.dialogData.miniStock) == 0 && delcommafy(this.dialogData.highStock) == 0) {
        this.onShowDialogSuccess('必须设置库存上限或者下限！</br>请重新设置！', 'onShowDialog')
        return
      }
      // 判断库存上下限设置输入数据是否合理
      if (
        this.dialogData.highStockState &&
        this.dialogData.miniStockState &&
        delcommafy(this.dialogData.miniStock) > delcommafy(this.dialogData.highStock)
      ) {
        this.onShowDialogSuccess('库存上限数量必须大于等于下限数量！</br>请重新设置！', 'onShowDialog')
        return
      }
      this.$refs.stockSettings.dialogVisible = false
      // 把数据转换成需要上传的类型
      let data = []
      this.multipleSelection.forEach((item) => {
        let obj = this.changeData(item)
        // 统一设置库存上下限
        if (this.dialogData.highStock) {
          // obj.highStock = this.dialogData.highStock ? delcommafy(this.dialogData.highStock) : ''
          obj.highStock = this.dialogData.highStock
        }
        if (this.dialogData.miniStock) {
          // obj.miniStock = this.dialogData.miniStock ? delcommafy(this.dialogData.miniStock) : ''
          obj.miniStock = this.dialogData.miniStock
        }
        data.push(obj)
      })
      this.saveOrUpdate(data)
    },
    // 修改的数据进行批量存储
    updateGoodsWarnings(val, key) {
      switch (key) {
        case 'highStockShow':
          val.highStock = val.highStockShow
          // val.highStock = val.highStockShow ? formatFour(delcommafy(val.highStockShow)) : ''
          // val.highStockShow = formatNumber(delcommafy(val.highStock))
          break
        case 'miniStockShow':
          val.miniStock = val.miniStockShow
          // val.miniStock = val.miniStockShow ? formatFour(delcommafy(val.miniStockShow)) : ''
          // val.miniStockShow = formatNumber(delcommafy(val.miniStock))
          break
      }
    },
    // 处理成服务端需要的参数
    changeData(val) {
      let data = {
        xghGoodsId: val.goodsId,
        xghStorehouseId: this.queryData.storehouseId,
        xghStorehouseName: this.queryData.xghStorehouseName,
        xghAccountBookId: this.accountBookId, // 账套id
        accountBookId: this.accountBookId, // 账套id
      }
      if (val.highStock) {
        data.highStock = val.highStock
        // data.highStock = val.highStock ? formatNumber(delcommafy(val.highStock)) : ''
      }
      if (val.miniStock) {
        data.miniStock = val.miniStock
        // data.miniStock = val.miniStock ? formatNumber(delcommafy(val.miniStock)) : ''
      }
      return data
    },
    // 保存
    onSubmit() {
      if (this.dataLoading) {
        this.showTips('请勿重复提交！')
        return
      }
      if (JSON.stringify(this.tableData) === JSON.stringify(this.saveData)) {
        this.showTips('没有需要修改的数据！', 2)
        return
      }
      let list = []
      this.tableData.forEach((item, index) => {
        // 判断是否修改过
        if (JSON.stringify(item) !== JSON.stringify(this.saveData[index])) {
          list.push(this.changeData(item))
        }
      })
      this.saveOrUpdate(list)
      this.setDataLoading()
    },
    saveOrUpdate(data) {
      postAction('/xghGoodsWarning/xghGoodsWarning/saveOrUpdate', data).then((res) => {
        if (res.code === 200) {
          const result = res.result
          this.onShowSuccess(res.message)
        } else {
          this.showTips(res.message, 2)
        }
        this.queryWarningStock()
      })
    },
    // 改变网络请求状态
    setDataLoading() {
      this.dataLoading = true
      setTimeout(() => {
        this.dataLoading = false
      }, 3000)
    },
    // 导出选择
    exportExcel() {
      const fileName = '库存上下限设置'
      let params = {
        ...this.queryData,
        fileName,
      }
      this.handleExportXlsByStaff(fileName, params)
    },
    // 刷新
    onRefresh() {
      // 重置条件
      this.queryData = this.$options.data().queryData
      this.stockData = this.$options.data().stockData

      this.getData()
    },
    // 搜索
    onQuery() {
      if (JSON.stringify(this.tableData) != JSON.stringify(this.saveData)) {
        this.showTips('请先保存数据！', 2)
        return
      }
      this.queryWarningStock()
    },
    // 请求筛选条件数据
    requestQuery(obj) { },
    // 点击修改表样式
    onClickTable(row) {
      // this.$refs.tableRef.toggleRowSelection(row)
    },
    // 新增数据中表格内输入框聚焦时选中
    focusinSelect() {
      event.target.select()
    },
    // 从后台获取数据,重新排序
    changeSort(val) {
      console.log(val) // column: {…} order: "ascending" prop: "date"
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
    },
    // 触发表格多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 类别信息新增/修改后数据获取
    onSaveTreeChanges(value) {
      this.showNewTree = false
      if (this.dialogVisible) {
        this.ruleForm.dwlb = value.lbmc
      } else {
        let tree = this.treeData
        // this.findTreeNode(tree, value)
        if (this.newTreeData.state == 'add') {
          this.addTreeNode(tree, value)
        } else if (this.newTreeData.state == 'edit') {
          this.editTreeNode(tree, value)
        }
      }
    },
    // 新增树形节点
    addTreeNode(tree, value) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].label == this.newTreeData.nowNode) {
          if (!tree[i].children) {
            this.$set(tree[i], 'children', [])
          }
          tree[i].children.push({
            label: value.lbmc,
            type: String(Number(tree[i].type) + 1),
          })
          return
        } else {
          let treeChildren = this.treeData[i].children
          for (let i1 = 0; i1 < treeChildren.length; i1++) {
            if (treeChildren[i1].label == this.newTreeData.nowNode) {
              if (!treeChildren[i1].children) {
                this.$set(treeChildren[i1], 'children', [])
              }
              treeChildren[i1].children.push({
                label: value.lbmc,
                type: String(Number(treeChildren[i1].type) + 1),
              })
              return
            } else {
              let treeCChildren = treeChildren[i1].children
              for (let i2 = 0; i2 < treeCChildren.length; i2++) {
                if (treeCChildren[i2].label == this.newTreeData.nowNode) {
                  if (!treeCChildren[i2].children) {
                    this.$set(treeCChildren[i2], 'children', [])
                  }
                  treeCChildren[i2].children.push({
                    label: value.lbmc,
                    type: String(Number(treeCChildren[i2].type) + 1),
                  })
                  return
                }
              }
            }
          }
        }
      }
    },
    // 修改树形节点
    editTreeNode(tree, value) {
      for (let i = 0; i < tree.length; i++) {
        if (tree[i].label == this.newTreeData.nowNode) {
          tree[i].label = value.lbmc
          return
        } else {
          let treeChildren = this.treeData[i].children
          for (let i1 = 0; i1 < treeChildren.length; i1++) {
            if (treeChildren[i1].label == this.newTreeData.nowNode) {
              tree[i].label = value.sjlb
              treeChildren[i1].label = value.lbmc
              return
            } else {
              let treeCChildren = treeChildren[i1].children
              for (let i2 = 0; i2 < treeCChildren.length; i2++) {
                if (treeCChildren[i2].label == this.newTreeData.nowNode) {
                  treeChildren[i1].label = value.sjlb
                  treeCChildren[i2].label = value.lbmc
                  return
                }
              }
            }
          }
        }
      }
    },
    // 找到当前需要新增或修改的树形节点（递归循环，暂未使用）
    findTreeNode(tree, value) {
      for (let i = 0; i < tree.length; i++) {
        console.log(tree[i].label, this.newTreeData.nowNode, '123')
        if (tree[i].label == this.newTreeData.nowNode) {
          console.log(tree[i].children, '找到啦')
          if (!tree[i].children) {
            this.$set(tree[i], 'children', [])
          }
          tree[i].children.push({
            label: value.lbmc,
            type: String(Number(tree[i].type) + 1),
          })
          return
        } else {
          console.log('没找到')
          this.findTreeNode(tree[i].children, value)
        }
      }
    },
    // 类别信息取消按钮触发
    onCancelTree() {
      this.showNewTree = false
    },
    // 触发列配置弹框
    onShowColumn() {
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 查询保存的列配置
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.columnKey)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData.data = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.columnKey, this.defaultColumnData, 'props')
        this.updateId = id
        this.columnData.data = this.defaultColumnData
      } else if (obj.code === 404) {
        this.columnData.data = this.defaultColumnData
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData.data = value
      let res = await this.$setColumn.editColumn(this.columnKey, this.columnData.data, this.updateId)
      if (res.code == 200) {
        this.showTips(res.message, 0)
      } else {
        this.showTips(res.message, 2)
      }
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 2) {
          sums[index] = '共' + this.total + '条明细'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.queryWarningStock()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.queryData.pageNo = val
      this.queryWarningStock()
    },
    // 仓库选择
    onChangeStorehouse(val) {
      if (JSON.stringify(this.tableData) != JSON.stringify(this.saveData)) {
        this.queryData.storehouseId = this.queryData.storehouseIdPre
        this.queryData.xghStorehouseName = this.queryData.xghStorehouseNamePre
        this.showTips('请先保存数据！', 2)
        return
      }
      this.ckOptions.forEach((item) => {
        if (item.id == val) {
          // 全部仓库时 “总库存”
          if (item.id == '') {
            this.queryData.xghStorehouseName = '总库存'
          } else if (item.id == val) {
            this.queryData.xghStorehouseName = item.storehouseName
          }
          this.queryData.storehouseIdPre = this.queryData.storehouseId
          this.queryData.xghStorehouseNamePre = this.queryData.xghStorehouseName
        }
      })
      this.queryWarningStock()
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'storehouseName') {
        this.ckOptions = this.filterMethod(this.ckOptions, value, label)
      }
    },
    // 选择商品分类
    handleNodeClick(data) {
      if (data.superiorId === 0) {
        this.queryData.xghGoodsTypeId = ''
      } else {
        this.queryData.xghGoodsTypeId = data.id
      }
      this.nowLabel = data.goodsTypeName || '全部'
      this.queryWarningStock()
    },
    // 商品类别数据筛选
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    onSureSimple() { },
    onShowTipsDialog(msg, tipsMark) {
      this.tipsData.tipsMark = tipsMark
      this.$refs.simplePrompt.showTwoBtn('el-icon-warning', msg, '是', '否')
    },
    onShowDialogSuccess(msg, tipsMark) {
      this.tipsData.tipsMark = tipsMark
      this.$refs.simplePrompt.showOneBtn('el-icon-warning', msg, '确定')
    },
    onShowSuccess(msg) {
      setTimeout(() => {
        this.$refs.simplePrompt.show({
          index: 0,
          text: msg,
        })
      }, 500)
    },
    showTips(msg, type = 1) {
      switch (type) {
        case 0:
          this.$elMessage.success(msg)
          break
        case 1:
          this.$elMessage.warning(msg)
          break
        case 2:
          this.$elMessage.error(msg)
          break
      }
    },
    // 控制输入不能超过限制位数
    inputNumber(key, val) {
      val[key] = val[key].replace(/[^0-9]/g, '')
      // //首位不能输入"."
      // val[key] = val[key].replace(/^\./g, '0.')
      // val[key] = val[key].replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      // val[key] = val[key].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      // if (this.numLength === 2) {
      //   // 小数点后面保留2位
      //   val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      // } else {
      //   // 小数点后面保留4位
      //   val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
$font-size: 12px;
$height-input: 50px; //0.55rem的高度
$height: 50px; //1rem的高度
::v-deep .el-table__row{
  height: 30px;
  min-height: 30px;
}
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: $height;
  display: flex;
  align-items: center;
  font-size: 12px;

  ::v-deep .el-button {
    width: 1rem;
    height:30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size;
    border-radius: 0.1rem;
    border: none;
    margin-right: 0.1rem;
    margin-left: 0;
    padding: 0 0.2rem;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    width: 70px;
    height:30px;
    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: 30px;
        border: none;
        font-size: $font-size;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .disabled_button {
      background: #cbced3 !important;
      color: #666 !important;
    }

    ::v-deep .el-button {
      width: 80px;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height:30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: $font-size;
        color: #666;

        &::placeholder {
          font-size: $font-size;
          color: #c1c1c1;
        }
      }

      ::v-deep .el-button {
        width: 60px;
      }
    }

    .el-button {
      width: 1rem;
    }

    .set_up {
      font-size: 20px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 1rem);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;

  .div_screen {
    width: 100%;
    height: 30px;
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .el-select {
      width: 2.250141rem;
      height: 30px;
      box-sizing: border-box;
      border-radius: 4px;
      margin-left: 0.1rem;

      .el-input {
        .el-input__inner {
          height: 30px;
          border-color: #e3e3e3;
          font-size: $font-size;
          padding-left: 0.150009rem;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    input {
      width: 2.250141rem;
      height: 30px;
      background: #ffffff;
      border: 1px solid #e3e3e3;
      opacity: 1;
      border-radius: 4px;
      font-size: $font-size;
      color: #666;
      box-sizing: border-box;
      padding: 0 0.150009rem;
      margin-left: 0.1rem;

      &:focus {
        outline: none;
        border-color: #1890ff;
      }
    }

    .screen_left {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .tips_p {
        font-size: $font-size;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 30px;
        color: #fd6c21;
      }

      >div {
        width: 3.375211rem;
        height: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-right: 0.25rem;

        >p {
          margin: 0;
          width: 1rem;
          // margin-right: 0.1rem;
          font-size: $font-size;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        >span {
          font-size: $font-size;
          color: #ff0000;
        }
      }
    }
  }

  .div_table {
    width: 100%;
    height: calc(100% - 0.8rem - 15px - 1rem);
    margin-top: 15px;
    display: flex;
    box-sizing: border-box;

    .div_tree {
      width: 2.812676rem;
      height: 100%;
      box-sizing: border-box;
      padding: 0.131258rem 0;
      border: 0.018751rem solid #e3e3e3;
      transition: all 0.3s;

      .tree_div1 {
        width: 100%;
        height: 0.337521rem;
        box-sizing: border-box;
        margin-top: 7px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: #666666;
          font-size: $font-size;
        }
      }

      .tree_input {
        width: 100%;
        margin-top: 6px;
        box-sizing: border-box;

        p {
          height:30px;
          margin-left: 10px;
          margin-right: 8px;
          border: 1px solid #dddddd;
          display: flex;
          align-items: center;
          position: relative;
          padding: 7px 5px 7px 9px;

          input {
            width: 100%;
            box-sizing: border-box;
            border: none;
            font-size: $font-size;

            &:focus {
              outline: none;
            }
          }

          span {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width:30px;
            background: #fff;

            .el-icon-search {
              font-size: 16px;
              color: rgb(211, 211, 211);
            }
          }
        }
      }

      .tree_structure {
        width: 100%;
        height: calc(100% - 0.337521rem - 0.131258rem - 0.131258rem - 0.55rem);
        box-sizing: border-box;
        padding: 0 0.168761rem;
        margin-top: 0.131258rem;
        overflow: auto;

        ::v-deep .el-tree {
          width: 100%;

          .el-tree-node__children {
            .el-tree-node__label {
              color: #666;
              font-weight: normal;
            }
          }

          .el-tree-node__label {
            font-size: $font-size;
            font-weight: 600;
          }

          .el-tree-node__content>.el-tree-node__expand-icon {
            padding-left: 0;
          }
        }
      }
    }

    .table_content {
      width: calc(100% - 3rem);
      margin-left: 0.187512rem;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            height: 30px;
            min-height: 50px;
            // line-height: 50px;
            display: flex;
            align-items: center;
            font-size: $font-size;
            padding: 0 5px;

            .index_input {
              display: flex;
              align-items: center;
              height: $height-input;
              width: 100%;
              padding: 0;

              input {
                width: 100%;
                height: 100%;
                border-radius: 0;
                background: #ffffff;
                border: none;
                color: #666;

                &:focus {
                  outline: none;
                  border: 1px solid #1b94fb;
                }
              }

              // &:first-child {
              //   justify-content: center;
              // }
            }
          }

          &:last-child {
            border-right: none;
          }
        }

        td:first-child {
          .cell {
            justify-content: center;
          }
        }

        td:nth-child(2) {
          .cell {
            justify-content: center;
          }
        }

        th {
          .cell {
            display: block;
            height: 30px;
            line-height: 50px;
            background: #ededed;
          }
        }

        .cell {
          .is-checked {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }

          .el-switch {
            .el-switch__input {
              font-size: $font-size;

              .el-switch__core {
                width: 0.48753rem;
              }
            }
          }
        }

        .el-table-column--selection .cell {
          padding: 0;
        }

        .el-table__body tr:hover>td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }

      .length {
        font-size: $font-size;
        margin-top: 8px;
        color: #999999;
      }
    }
  }

  .table_pagination {
    width: 100%;
    height: $height;
    box-sizing: border-box;
    padding: 0.168761rem 0;
    display: flex;

    .pagination_div {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 0.525033rem;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
